<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;margin-bottom: 30rpx;">卡券管理</view>
		<button class="btn" @click="toAddCoupon()">
			<image src="/static/加号@2x.png"></image>
			新增优惠券
		</button>
		<uni-card class="card">
			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" style="border-radius: 80rpx;" />
				</view>
				<view class="content">
					<view v-if="current === 0" v-for="(coupon, index) in shjqlist" :key="index">
						<view class="items mb20" v-show="coupon.status==0">
							<view class="items_left" v-show="coupon.type=='满减券'">
								<view class="items_left_top mb30">
									满{{coupon.triggerMoney}}元可用
								</view>
								<view class="items_left_bottom">
									<text style="font-size: 35rpx;">¥</text>
									{{coupon.preferentialMoney}}
								</view>
							</view>
							<view class="items_left" v-show="coupon.type=='折扣券' && coupon.status==0">
								<view></view>
								<view class="items_left_bottom">
									{{coupon.discount}}<text style="font-size: 35rpx;">折</text>
								</view>
							</view>
							<view class="items_right">
								<view class="items_right_top" style="color: black;margin-bottom: 10rpx;">
									优惠券名称:{{coupon.name}}
								</view>
								<view class="items_right_mid mb20" style="color: gray;font-size: 24rpx;">
									有效期：{{coupon.start}}-{{coupon.end}}
								</view>
								<view class="items_right_bottom" style="color: gray;font-size: 24rpx;margin-bottom: 30rpx;">
									每人限领一张
								</view>
							</view>
						</view>
					</view>
					<view v-show="current === 1" v-for="(coupon, index) in gqlist" :key="index">
						<view class="items mb20" v-show="coupon.status==0">
							<view class="items_leftt" v-show="coupon.type=='满减券'">
								<view class="items_left_top mb30">
									满{{coupon.triggerMoney}}元可用
								</view>
								<view class="items_left_bottom">
									<text style="font-size: 35rpx;">¥</text>
									{{coupon.preferentialMoney}}
								</view>
							</view>
							<view class="items_leftt" v-show="coupon.type=='折扣券'">
								<view></view>
								<view class="items_left_bottom">
									{{coupon.discount}}<text style="font-size: 35rpx;">折</text>
								</view>
							</view>
							<view class="items_rightt">
								<view class="items_right_top" style="color: gray;margin-bottom: 10rpx;">
									优惠券名称:{{coupon.name}}
								</view>
								<view class="items_right_mid mb20" style="color: gray;font-size: 24rpx;">
									有效期：{{coupon.start}}-{{coupon.end}}
								</view>
								<view class="items_right_bottom">
									<view class="items_right_bottom_left">
										每人限领一张
									</view>
									<image src="/static/已结束.png"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-section>
		</uni-card>
	</view>
</template>

<script setup>
	import {
		ref,onMounted
	} from 'vue';
import request from '../../../utils/request.js';
import { onLoad } from '@dcloudio/uni-app'
	// 定义响应式数据
	const items = ref(['进行中', '已结束']);
	const mid = ref(0)
	const current = ref(0);
	const colorIndex = ref(0);
	const activeColor = ref('#007aff');
	const styleType = ref('button');
	const shjqlist = ref([]);
	const gqlist = ref([]);
	
onLoad((options)=>{
	console.log(options)
	mid.value=options.mid
	getshjq()
})	
// 定义响应式数据存储当前时间
const currentTime = ref('');

// 在组件挂载时获取当前时间
onMounted(() => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  // 格式化时间
  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
});
//获取商家优惠券
function getshjq(){
	request({
		url: 'yyq/coupon/getByMId/'+mid.value,
		method: 'GET',
		success(res) {
			console.log(res.data.data);
			shjqlist.value=res.data.data
			// 比较时间并更新优惠券状态
			updateCouponStatus();
		},
		fail(error) {
			console.error('获取信息失败', error);
			uni.showToast({
				title: '获取救援信息失败，请重试',
				icon: 'none'
			});
		}
	});
}

// 比较时间并更新优惠券状态
function updateCouponStatus() {
  const now = new Date(currentTime.value);
  shjqlist.value.forEach((coupon) => {
    const endDate = new Date(coupon.end);
    if (now > endDate) {
      // 假设优惠券对象有 status 属性
      coupon.status = 5; 
			gqlist.value.push(coupon);
    }
  });
}

	function backPage(){
		uni.navigateBack()
	}



	function toAddCoupon(){
		uni.navigateTo({
			url:'/pages/index/kaquan/coupon/coupon?mid='+mid.value
		})
	}

	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	};
</script>

<style scoped>
	@import url('@/common/app.css');

	.mb20 {
		margin-bottom: 20rpx;
	}
	.mb30{
		margin-bottom: 30rpx;
	}

	.card {
		margin: 0;
		height: 1200rpx;
	}

	.uni-padding-wrap {
		padding: 0px 30px;
		margin-bottom: 30rpx;
	}

	.btn {
		width: 90%;
		height: 70rpx;
		line-height: 70rpx;
		color: #007aff;
		border-radius: 100rpx;
	}

	.btn image {
		width: 30rpx;
		height: 30rpx;
	}

	.items {
		width: 100%;
		height: 220rpx;
		display: flex;
		justify-content: start;
	}

	.items_left {
		width: 30%;
		padding: 30rpx 10rpx;
		background-color: #ff7531;
		text-align: center;
		color: white;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.items_left_bottom {
		font-size: 80rpx;
		font-weight: 700;
	}

	.items_right {
		width: 70%;
		background-color: #fff3eb;
		padding: 30rpx 15rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.items_leftt {
		width: 30%;
		padding: 30rpx 10rpx;
		background-color: #ffbb99;
		text-align: center;
		color: #fefefe;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.items_rightt {
		width: 70%;
		background-color: #f2f2f2;
		padding: 30rpx 15rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.items_right_bottom {
		color: gray;
		font-size: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	image {
		width: 140rpx;
		height: 60rpx;
	}
	.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
	.back-icon { width: 30px; height: 30px;}	
	.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
	.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	 
</style>